{extend name="./base" /}

{block name="css"}
<link rel="stylesheet" href="__STATIC__/css/album.css" media="all">
<style>
    .album-header .layui-btn{width: 110px;}
    .layui-upload-drag{text-align: center;width:438px;}
    .img-view{width:80px;height:80px;margin-left:20px;margin-top: 20px}
    .layui-upload-drag .img-list{margin-top: 50px;display: flex;flex-wrap: wrap;}
</style>
{/block}

{block name="body"}
<div class="album">
    <input type="hidden" id="gid" value="{$gid}" />
    <input type="hidden" id="count" value="{$count}" />
    <div class="album-header">
        <input class="layui-btn layui-btn-sm layui-btn-normal" onclick="imgUpload()" value="上传图片"/>
        <span>
            <select class="layui-btn layui-btn-sm layui-btn-primary" onchange="moveGroup(this)">
                <option value="-1" >移动到分组</option>
                {if !empty($groups)}
                    {foreach $groups as $item}
                        <option value="{$item['id']}" >{$item['name']}</option>
                    {/foreach}
                {/if}
            </select>
            <input class="layui-btn layui-btn-sm layui-btn-normal" onclick="updateImg()" value="修改名称"/>
            <input class="layui-btn layui-btn-sm layui-btn-danger" onclick="delImg()" value="删除图片"/>
        </span>
    </div>
    <div class="album-box">
        <ul class="album-group">
            <li class="{$gid == 0 || empty($gid) ? 'active' : ''}" onclick="groupHref(this, 1)">
                <span>全部</span>
                <span>
                    <button class="layui-btn layui-btn-xs actBtnAll">
                        添加分组
                    </button>
                </span>
            </li>
            {if !empty($groups)}
            {foreach $groups as $item}
            <li class="{$gid == $item['id'] ? 'active' : ''}" onclick="groupHref(this, 2)">
                <span>{$item['name']}</span>
                <span>
                    <i class="layui-icon layui-icon-more-vertical layui-font-12 actBtn" data-id="{$item['id']}"></i>
                </span>
            </li>
            {/foreach}
            {/if}
        </ul>
        <div class="album-content">
            <ul class="album-img"></ul>
            <div id="page"></div>
        </div>

        <!-- 上传组件 -->
        <script type="text/html" id="uploadModal">
            <div class="layui-upload-drag" id="uploadElment">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
                <div class="layui-hide img-list" id="uploadDemoView"></div>
                <div class="layui-hide" id="picSrc"></div>
            </div>
        </script>

        <!-- 图片列表 -->
        <script type="text/html" id="picList">
            {{# $.each(d, function(index, value){  }}
            <li class="media-list-item" data-id="{{value.id}}" data-pic="{{value.pic}}" onclick="imgClick(this)">
                <div class="media-list-img">
                    <img src="{{value.pic}}" alt="{{value.name}}" />
                </div>
                <span>{{value.name}}</span>
            </li>
            {{# }) }}
        </script>
    </div>
</div>
{/block}

{block name="script"}
<script>
    let imgUpload, gid = $("#gid").val(), count = $("#count").val();
	layui.use(['layer', 'form', 'table', 'dropdown', 'upload','laytpl','laypage'], function () {
	    let $ = layui.$, dropdown = layui.dropdown, upload = layui.upload, laypage = layui.laypage, laytpl = layui.laytpl;
	    // 初始化加载数据
        loadData(1);

        // 加载图片数据
        function loadData(page){
            $.post('/admin/album/grid',{page: page, gid: gid}, function(res){
                laytpl($("#picList").html()).render(res.data, function(data) {
                    $(".album-img").html(data);
                });
                count = res.count;
                if (count > 0){
                    laypage.render({
                        elem: 'page',
                        count: count,
                        limit: 6,
                        curr: page,
                        jump: function(obj, first) {
                            if (!first) {
                                loadData(obj.curr);
                            }
                        }
                    })
                }
            })
        }

        // 本地上传
        imgUpload = function(){
            layer.open({
                type: 1,
                title: '本地上传',
                shade: 0.5,
                area: ['500px', '500px'],
                btn: ['确定','关闭'],
                content: $('#uploadModal').html(),
                success: function () {
                    upload.render({
                        elem: '#uploadElment'
                        ,multiple: true
                        ,url: '/admin/upload/uploadalbum?gid=' + gid
                        ,number: 9
                        ,done: function(res){
                            if (res.code != 0){
                                layer.msg(res.msg, {icon: 2, time: 1000});
                                return false;
                            }
                            $('#uploadDemoView').removeClass('layui-hide');
                            let html = '<img class="img-view" src="'+res.data.pic+'" />';
                            $('#uploadDemoView').append(html);
                        }
                    });
                },
                yes: function(index, layero){
                    layer.close(index);
                    window.location.reload();
                }
            });
        }

        // 更多设置
        dropdown.render({
            elem: '.actBtn'
            ,trigger: 'hover'
            ,data: [
                {title: '编辑分组', type:1},
                {title: '删除分组', type:2}
            ]
            ,click: function(obj){
                let type = obj.type, gid = this.elem.data('id');
                if (type == 1){
                    layer.prompt({title: '分组名称', formType: 3}, function(value, index){
                        $.post('/admin/album/editgroup', {gid: gid, name: value}, function(){
                            layer.close(index);
                            window.location.href = '/admin/album/index?gid=' + gid;
                        })
                    });
                } else {
                    let ids = [];
                    ids.push(gid);
                    comDel(ids, '/admin/album/delgroup', '删除后当前分组的图片将不可用,继续删除?');
                }
            }
        });

        // 添加分组
        $(".actBtnAll").click(function(event){
            event.stopPropagation();
            layer.prompt({title: '分组名称', formType: 3}, function(value, index){
                $.post('/admin/album/addgroup', {name: value}, function(){
                    layer.close(index);
                    window.location.href = '/admin/album/index';
                })
            });
        })
	});



	//分组选择跳转
    function groupHref(obj, type = 0){
        let gid = 0;
        if (type == 2){
            gid = $(obj).find('.actBtn').data('id');
            gid = gid ? gid : 0;
        }
        window.location.href = '/admin/album/index?gid=' + gid;
    }

	let selectedPicList = [];

    // 移动图片分组
    function moveGroup(obj){
        let ids = [], gid = $(obj).val();
        $.each(selectedPicList, function(idx, val){
            ids.push(val.id);
        })
        if (ids.length == 0){
            layer.msg('请先选择图片', {icon:2, time: 1000});
            return false;
        }
        if (gid != -1){
            $.post('/admin/album/updatealbum', {gid: gid, ids: ids}, function(){
                window.location.href = '/admin/album/index';
            })
        }
    }

    // 修改图片
    function updateImg(){
        let ids = [];
        $.each(selectedPicList, function(idx, val){
            ids.push(val.id);
        })
        layer.prompt({title: '图片名称', formType: 3}, function(value, index){
            $.post('/admin/album/updatealbum', {name: value, ids: ids}, function(){
                layer.close(index);
                window.location.href = '/admin/album/index';
            })
        });
    }
    // 删除图片
    function delImg(){
        let ids = [];
        $.each(selectedPicList, function(idx, val){
            ids.push(val.id);
        })
        comDel(ids, '/admin/album/delalbum')
    }
	// 图片选中
	function imgClick(obj){
        let id = $(obj).data('id');
        let pic = $(obj).data('pic');
        let existIdx = -1;

        if (selectedPicList.length == 0){
            selectedPicList.push({id: id, pic: pic});
        } else {
            $.each(selectedPicList, function(idx, val){
                if (val.id == id){
                    existIdx = idx;
                    return false;
                }
            })
            if (existIdx == -1){
                selectedPicList.push({id: id, pic: pic});
            } else {
                selectedPicList.splice(existIdx, 1);
            }
        }

        $(".media-list-item").each(function(idx, val){
            $(val).find(".image-box-active").remove();
            let id = $(this).data('id');
            if (selectedPicList.length > 0){
                $.each(selectedPicList, function(idx1, val1){
                    if (val1.id == id){
                        let html = '<div class="image-box-active"><i class="active-index">'+ (idx1 + 1) +'</i></div>';
                        $(val).find(".media-list-img").append(html);
                    }
                })
            }
        })
    }

    // 父页面获取当前选中图片
    function getPicList(){
        return selectedPicList;
    }
</script>
{/block}